
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ycbl/config/bl_color.dart';
import 'package:ycbl/config/bl_style.dart';
import 'package:ycbl/widget/bl_button_controller.dart';

/// 颜色渐变 Btn，这里的渐变是颜色由浅到深的顺序
class GradientBtn extends StatefulWidget {
  /// 从左到右渐变
  static const Left_Right = 0;
  /// 从右到左渐变
  static const Right_Left = 1;
  /// 从上到下渐变
  static const Top_Bottom = 2;
  /// 从下到上渐变
  static const Bottom_Top = 3;

  /// 显示的文字
  final String text;
  /// 文字样式，默认白色普通大小文字
  final TextStyle style;
  /// 渐变方向
  final int gradientDirection;
  /// 渐变颜色组
  final List<Color> colors;
  /// 圆角大小
  final double radius;
  /// 点击回调
  final VoidCallback onPressed;
  /// 内边距
  final EdgeInsetsGeometry padding;
  /// 控制器：如是否可点击，如果传入为 null ，则会创建一个默认的
  final BLButtonController controller;

  const GradientBtn({
    Key key,
    this.text = '',
    this.style = BLStyle.commonWhiteTextStyle,
    this.gradientDirection = Left_Right,
    this.colors = const [
      BLColor.gradientColor1,
      BLColor.gradientColor2
    ],
    this.radius = 30,
    this.onPressed,
    this.padding,
    this.controller,
  }) : super(key: key);


  @override
  _GradientBtnState createState() => _GradientBtnState();
}

class _GradientBtnState extends State<GradientBtn> {

  BLButtonController _controller;

  @override
  void initState() {
    super.initState();
    // 如果传入为 null ，则会创建一个默认的
    _controller = widget.controller ?? BLButtonController(initClickable: true);
  }

  @override
  void dispose() {
    // 内部创建的 controller 应该内部取消订阅，防止内存泄露
    // 外部创建的 外部取消
    if(widget.controller == null) {
      _controller?.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    //渐变方向
    var begin;
    var end;
    switch(widget.gradientDirection) {
      case GradientBtn.Top_Bottom: // 从上到下渐变
        begin = Alignment.topCenter;
        end = Alignment.bottomCenter;
        break;
      case GradientBtn.Bottom_Top: // 从下到上渐变
        begin = Alignment.bottomCenter;
        end = Alignment.topCenter;
        break;
      case GradientBtn.Right_Left:// 从右到左渐变
        begin = Alignment.centerRight;
        end = Alignment.centerLeft;
        break;
      default: // 从左到右渐变
        begin = Alignment.centerLeft;
        end = Alignment.centerRight;
        break;
    }

    // 监听是否可点击的变化
    return ValueListenableBuilder(
      valueListenable: _controller.clickableNotifier,
      builder: (context, clickable, child) => Ink(
        decoration: BoxDecoration(
          //颜色渐变效果
          gradient: LinearGradient(
            colors: widget.colors,
            begin: begin,
            end: end,
          ),
          // 给 InkWell 蒙上一层阴影 视为不可点击
          color: clickable ? null : BLColor.translucentColor,
          borderRadius: BorderRadius.all(Radius.circular(widget.radius)),
        ),
        child: InkWell(
          // 和 Ink 设置为同样的圆角，这样在点击时，水波纹效果时，就可以是圆角的
          borderRadius: BorderRadius.all(Radius.circular(widget.radius)),
          // 可点击时再设置点击事件
          onTap: clickable ? widget.onPressed : null,
          // 在 InkWell 内部写 padding，这样水波纹效果，就可以布满整个按钮
          child: Padding(
            padding: widget.padding ?? const EdgeInsets.fromLTRB(20, 5, 20, 5),
            child: Center(
              child: Text(widget.text, style: widget.style,),
            ),
          ),
        ),
      ),
    );
  }
}